<template>
    <!--搜索-->
    <div class="header">
        <el-input v-model="input" placeholder="请输入内容"></el-input>
        <el-button type="success" @click="accountSearch">查询</el-button>
        <el-button type="primary" @click="showDialog">添加</el-button>
    </div>
    <!--表格区域-->
    <el-table size="mini" :data="tableData" style="width: 99%">
        <el-table-column prop="rooId" label="房间号" width="180"/>
        <el-table-column prop="roomTypeName" label="房间类型" width="180"/>
        <el-table-column prop="price" label="房间价格" width="180"/>
        <el-table-column prop="roomNum" label="床位数" width="180"/>
        <el-table-column label="房间状态" width="180">
            <template #default="scope">
                <el-tag v-if="scope.row.roomTypeId==1" type="success">{{ scope.row.roomStateName}}</el-tag>
                <el-tag v-if="scope.row.roomTypeId==2" type="warning">{{ scope.row.roomStateName}}</el-tag>
                <el-tag v-if="scope.row.roomTypeId==3" type="danger">{{ scope.row.roomStateName}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template #default="scope">
                <el-button type="success" @click="uploadImg(scope.row)">上传图片</el-button>
                <el-button type="warning" @click="handleEdit(scope.row)">编辑</el-button>
                <el-button type="danger" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <!--分页器-->
    <el-pagination
            background layout="total,prev, pager, next,jumper"
            :total="total"
            v-model:currentPage="currentPage"
            :page-size="pageSize"
            @current-change="handleCurrentChange"
            class="pagination">
    </el-pagination>
    <!--添加对话框-->
    <el-drawer
            v-model="addopenDrawer"
            :title="isAdd?'添加账户':'修改账户'"
            size="30%"
            direction="rtl"
    >
        <div class="item">
            <span>房类Id：</span>
            <div>
                <div><el-input  v-model="accountForm.roomTypeId" placeholder="请输入1/2/3"></el-input></div>
            </div>
        </div>
        <div class="item">
            <span>房间状态：</span>
            <div>
                <div><el-input  v-model="accountForm.roomStateName" placeholder="请输入房间状态"></el-input></div>
            </div>
        </div>
        <div class="item">
            <span>房间类型：</span>
            <div><el-input  v-model="accountForm.roomTypeName" placeholder="请输入房间类型"></el-input></div>
        </div>
        <div class="item">
            <span>房间价格：</span>
            <div><el-input  v-model="accountForm.price" placeholder="请输入房间价格"></el-input></div>
        </div>
        <div class="item">
            <span>床位数：</span>
            <div><el-input  v-model="accountForm.roomNum" placeholder="请输入床位数"></el-input></div>
        </div>
        <div class="item">
            <span></span>
            <el-button type="primary" @click="editForm">{{isAdd?'添加':'修改'}}</el-button>
        </div>
    </el-drawer>
    <!--图片对话框-->
    <el-dialog
            v-model="dialogVisible"
            title="房间照片"
            width="50%"
    >
        <el-upload
                :file-list="imgList"
                :action="url"
                list-type="picture-card"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
        >
            <el-icon><Plus /></el-icon>
        </el-upload>
        <el-dialog v-model="dialogVisible2">
            <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </el-dialog>
</template>

<script>
    import api from "../../api";
    import base from "../../api/base";
    import {reactive, toRefs, onMounted} from 'vue'
    import { ElMessageBox,ElMessage } from 'element-plus'
    import { Plus } from '@element-plus/icons-vue'
    export default {
        name: "Room",
        components:{Plus},
        setup() {
            let data = reactive({
                tableData: [],  // 账户列表
                total: 0, // 总条数
                pageSize:0, //一页显示几条数据
                currentPage: 1, //当前页码
                input:'', //输入框的内容
                type:1, // 为1表示分页 为2表示模糊查询后分页
                list:[], //模糊查询分页后数据
                isAdd:true,
                addopenDrawer:false ,//对话框
                //客房表单数据
                accountForm:{
                    rooId:'',
                    roomStateId:'',
                    roomTypeId:'',
                    roomStateName:'',
                    roomTypeName:'',
                    price:'',
                    roomNum:'',
                    imgUrl:''
                },
                dialogVisible:false, //点击上传按钮显示对话框
                dialogVisible2:false, //内层图片对话框
                dialogImageUrl:'', // 图片地址
                url:base.baseUrl+base.upload,
                imgList:[]// 图片列表
            })
            onMounted(() => {
                getRoomManageList()
                getRoomManageCount()
            })
            let currentRoomId=''
            // 打开图片对话框
            let uploadImg=(row)=>{
                // console.log(row)
                let {rooId}=row
                currentRoomId=rooId
                data.dialogVisible=true
                //获取图片
                api.getRoomImg({rooId:rooId}).then(res=>{
                    if (res.data.status===200){
                        const arr=res.data.data
                    }else {
                        ElMessage.error('获取图片失败')
                    }
                })
            }
               // 上传成功
            let handleAvatarSuccess=(res)=>{
                console.log(res)
            }
            // 上传之前
            let beforeAvatarUpload=(file)=>{
                // console.log(file)
                let imgTypes=['image/jpeg','image/png','image/gif']
                const isJPG=imgTypes.includes(file.type)
                const isLt2M = file.size / 1024 / 1024 < 2
                if (!isJPG) {
                    ElMessage.error('请输入正确的格式!')
                }
                if (!isLt2M) {
                    ElMessage.error('图片大小不能超过2MB!')
                }
                return isJPG && isLt2M
            }
            // 显示添加账户对话框
            let showDialog=()=>{
                data.addopenDrawer=true
            }
            // 添加账户
            let editForm=()=>{
                if (data.isAdd){
                    api.getRoomAdd({
                        roomTypeId:data.accountForm.roomTypeId,
                        roomStateName:data.accountForm.roomStateName,
                        roomTypeName:data.accountForm.roomTypeName,
                        price:data.accountForm.price,
                        roomNum:data.accountForm.roomNum,
                        imgUrl:data.accountForm.imgUrl,
                    }).then(res=>{
                        if (res.data.status===200){
                            ElMessage.success('添加成功')
                            data.addopenDrawer=false
                            getRoomManageList()
                        }else {
                            ElMessage.success('添加失败')
                        }
                    })
                }
                if (!data.isAdd){
                    // 修改账户
                    api.getRoomUpdate({
                        rooId:data.accountForm.rooId,
                        roomTypeId:data.accountForm.roomTypeId,
                        roomStateName:data.accountForm.roomStateName,
                        roomTypeName:data.accountForm.roomTypeName,
                        price:data.accountForm.price,
                        roomNum:data.accountForm.roomNum,
                    }).then(res=>{
                        if (res.data.status===200){
                            ElMessage.success('修改成功')
                            data.addopenDrawer=false
                            getRoomManageList()
                        }else {
                            ElMessage.error('修改失败')
                        }
                    })
                }
            }
            // 删除账户
            let handleDelete= (row)=>{
                ElMessageBox.confirm(
                    '是否永久删除',
                    '警告',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    api.getRoomDelete({rooId:row.rooId}).then(res=>{
                        if (res.data.status===200){
                            ElMessage.success('删除成功')
                        }
                        getRoomManageList()
                    })
                })
                    .catch(() => {
                        ElMessage.info('取消成功')
                    })
            }
            // 预编辑
            let handleEdit=(row)=>{
                data.accountForm=row
                data.isAdd=false
                data.addopenDrawer=true
            }

            // 获取客房管理列表
            let getRoomManageList = () => {
                api.getRoomManageList().then(res => {
                    data.pageSize=res.data.pageSize
                    data.tableData = res.data.data
                })
            }
            // 获取账户总数
            let getRoomManageCount = () => {
                api.getRoomManageCount().then(res => {
                    data.total = (res.data.result[0]["count(*)"])
                })
            }
            // 分页
            let handleCurrentChange = (page) => {
                data.currentPage=page
                if (data.type===1){
                    // 发起请求获取下一页
                    api.getRoomManageList({page: page}).then(res => {
                        data.tableData = res.data.data
                    })
                }else {
                    // 模糊查询后分页每页显示5条
                    data.tableData=data.list.slice((page-1)*5,page*5)
                }
            }
            // 模糊查询
            let accountSearch=()=>{
                api.getRoomSearch({search:data.input}).then(res=>{
                    data.currentPage=1 // 查询到默认第一页
                    if (res.data.status===200){
                        data.list=res.data.result //模糊查询分页后总条数
                        data.total=res.data.result.length
                        data.pageSize=5
                        data.tableData=res.data.result.slice(0,5)
                        data.type=2
                    }else {
                        data.tableData=[]
                        data.total=0
                        data.type=1
                    }
                })
            }
            return {
                ...toRefs(data),
                handleCurrentChange,
                getRoomManageCount,
                accountSearch,
                showDialog,
                editForm,
                handleEdit,
                handleDelete,
                uploadImg,
                handleAvatarSuccess,
                beforeAvatarUpload
            }
        }
    }
</script>

<style scoped lang="scss">
    .pagination {
        margin-top: 10px;
    }

    .header {
        display: flex;
    }
    button{
        margin-left: 20px;
    }
    .item {
        display: flex;
        font-size: 14px;
        align-items: center;
        margin-bottom: 10px;
        span {
            width: 70px;
            text-align: right;
            color: #666;
        }
        div{
            flex: 1;
        }
    }
    .avatar-uploader  {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        width: 178px;
        height: 178px;
    }
    .avatar-uploader:hover {
        border-color: #409eff;
    }
    .el-icon.avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        text-align: center;
    }
    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }
</style>
